<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(val,index) in list" :key="index">
          <!-- v-for="(val,index) in list" :key="index" -->

          <div class="wrap">
            <div class="img_wrap">
              <img :src="val.user.avatarUrl" alt />
            </div>
            <div class="content_wrap">
              <div class="header_wrap">
                <div class="info_wrap">
                  <p>{{val.user.nickname}}</p>
                  <p>{{val.time | fomdata}}</p>
                </div>
                <div>{{val.likedCount}}点赞</div>
              </div>
              <div class="footer_wrap">{{val.content}}</div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { plapi } from "../api/index";
import moment from "moment";
export default {
  data() {
    return {
      list: [],
      isLoading: false,
      finished: false,
      loading: false,
      offset: 0,
    };
  },
  methods: {
    async onLoad() {
      if (this.isLoading) {
        this.list = [];
        this.isLoading = false;
      }
      const res = await plapi({
        offset: this.offset,
      });
      console.log(res);
      let arr = [...this.list];
      this.list = arr.concat(res.data.hotComments);
      this.isLoading = false;
      this.loading = false;
      this.offset += 10;
    },
    onRefresh() {
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.offset = 0;
      this.onLoad();
    },
  },
  //   async created() {},
  filters: {
    fomdata(val) {
      return moment(val).format("YYYY月MM月DD日");
    },
  },
};
</script>

<style scoped>
/* 容器样式 */
.wrap {
  display: flex;
}
.img_wrap {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.266667rem;
}
.img_wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.content_wrap {
  flex: 1;
}

/* 右侧头部 */
.header_wrap {
  display: flex;
}
.info_wrap {
  flex: 1;
}
.info_wrap p:first-child {
  font-size: 0.373333rem;
  color: #666;
}
.info_wrap p:last-of-type {
  font-size: 0.24rem;
  color: #999;
}
.header_wrap div:last-of-type {
  color: #999;
  font-size: 0.293333rem;
}

/* 评论内容 */
.footer_wrap {
  font-size: 0.4rem;
  color: #333;
}
</style>